/*
 * @Autor: dc
 * @Date: 2022-03-30 17:51:05
 * @LastEditors: dc
 * @LastEditTime: 2022-04-01 13:28:36
 * @Description: 用户状态值 组件
 */

import React, { Component } from 'react';
import { ProgressBar } from 'antd-mobile'
import store from '../../redux/store'
import './index.scss'

class index extends Component {
    render() {
        const { energyNum, treeArr,phase,userName } = store.getState();
        const energyFull = treeArr.filter(item=>{
            return item.id === phase
        })[0].energyFull
        const percentage = (energyNum / energyFull) * 100
        return (
            <div className='flex_center user_head'>
                <img className='portrait' src={require('../../assets/logo.png')} alt="" />
                <div className='user_name flex_column flex_around'>
                    <div className="flex_start">
                        <div className='name'>{userName}</div>
                        <div className='state_num'>
                            {energyNum}/{energyFull}
                        </div>
                    </div>

                    <ProgressBar
                        className='energy'
                        percent={percentage}
                        style={{
                            '--fill-color': '#54B381',
                            '--track-color': '#20201F',
                        }}
                    />

                </div>
            </div>
        );
    }
}

export default index;